<template>
  <div>
    <el-form
      :size="size"
      inline
      :model="searchData"
      ref="searchForm"
      :label-width="labelWidth"
      :style="formStyle"
    >
      <slot></slot>
      <el-form-item
        v-for="(item, index) in searchForm"
        :label="item.label"
        :key="item.prop"
        :style="item.style"
      >
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'Input'"
          v-model="searchData[item.prop]"
          :placeholder="item.placeholder"
        ></el-input>
        <!-- 密码框 -->
        <el-input
          v-if="item.type === 'password'"
          disabled
          v-model="searchData[item.prop]"
          :placeholder="item.placeholder"
          auto-complete="off"
        >
        </el-input>
        <!-- 下拉框 -->
        <el-select
          v-if="item.type === 'Select'"
          v-model="searchData[item.prop]"
          @change="item.change(searchData[item.prop])"
          :placeholder="item.placeholder"
          @visible-change="$forceUpdate()"
        >
          <el-option
            v-for="op in item.options"
            :label="op.label"
            :value="op.value"
            :key="op.value"
            >{{ op.label }}</el-option
          >
        </el-select>
        <!-- 日期 -->
        <el-date-picker
          v-if="item.type === 'Date'"
          v-model="searchData[item.prop]"
          value-format="yyyy-MM-dd"
          @change="item.change(searchData[item.prop])"
          :placeholder="item.placeholder"
        >
        </el-date-picker>
      </el-form-item>
      <el-button type="success" @click="handleSubmit">查询</el-button>
    </el-form>
  </div>
</template>

<script setup lang="ts">
type SearchForm = {
  type: string
  label: string
  prop: string
  style?: string
  placeholder?: string
  rules?: {
    required?: boolean
    message?: string
    trigger?: string
  }[]
  options?: any
  props?: any
  change?: any
}
const prop = defineProps<{
  formStyle: string
  isHandle?: Boolean
  labelWidth?: '120px' | string
  size?: 'isHandle' | String
  searchForm: SearchForm[]
  searchData: any
}>()
const emits = defineEmits(['submit'])
const handleSubmit = () => {
    emits('submit')
}

// const rules = computed(() => {
//   let rules = prop.searchForm?.reduce((map: any, i: any) => {
//     if (i.rules) {
//       map[i.prop] = i.rules
//     }
//     return map
//   }, {})
//   return rules
// })
</script>
